<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
		<div id="root">
            <counter :count="1"></counter>
            <counter :count="2"></counter>
		</div>


    <script type="text/javascript">
        
        var counter={
            props:['count'],
            template:'<div @click="handleClick">{{count}}</div>',
            methods: {
                // 子组件不能更改父组件传递过来的参数数据
                handleClick:function(){
                    this.count++
                }
               
            },
        }

		var app=new Vue({
			el:'#root',
            components:{
                counter:counter
            },
			// data:{
			// 	content:'hello world2'
			// },
			// methods: {
			// 	handleClick:function(){
			// 		alert("helklo");
			// 	}
			// }
		})
	</script>
	</body>
</html>
